<!-- 玩家账号切换 -->
<template>
    <div>
      <el-card>
        <div class="topInquire">
        <el-button type="primary" icon="el-icon-circle-plus-outline" size="small" @click="dialogVisible=true">新增账号切换记录</el-button>
        
        <div>
          <span>来源玩家ID </span>
          <el-input v-model.number="sourcePlayer" clearable  style="width:200px;" size="small" placeholder="请输入" />
        </div>

        <div>
          <span>目标玩家ID </span>
          <el-input v-model.number="targetPlayer" clearable  style="width:200px;" size="small" placeholder="请输入" />
        </div>

        <el-button icon="el-icon-search" type="primary" size="small" @click="handleInquire">查询</el-button>

       </div>
 
          <!-- 表格 -->
          <el-table
            ref="table"
            border
            :data="playerToggleData"
            :header-cell-style="{background:'#f5f7fa'}"
            :height="tableHeight"
            style="width: 100%;"
          >
            <el-table-column prop="id" label="数据ID" />
            <el-table-column prop="oriPlayerId" label="来源玩家ID" />
            <el-table-column prop="destPlayerId" label="目标玩家ID" />
            <el-table-column prop="userId" label="用户ID" />
            <el-table-column prop="userName" label="用户名" />
            <el-table-column label="操作" fixed="right" width="120">
            <template #default="{row}">
              <el-button size="small" type="danger" plain icon="el-icon-delete" @click="handleDelete(row.id)">删除</el-button>
            </template>
          </el-table-column>
          </el-table>
  
          <!-- 分页 -->
          <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            :total="total"
            :current-page="currentPage"
            :page-size="pageSize"
            @current-change="changePage"
          />

      </el-card>
  
      <!-- 弹窗 -->
      <el-dialog
        title="新增账号切换记录"
        :visible.sync="dialogVisible"
        width="35%"
        :modal-append-to-body="false"
        center
        @close="closeDialog"
      >
        <div class="dialog-content">
          <el-form ref="ruleForm" :model="formData" label-width="100px" :rules="rules">
            <el-form-item label="来源玩家ID" prop="oriPlayerId">
              <el-input v-model.number="formData.oriPlayerId" placeholder="请输入" clearable  />
            </el-form-item>
            <el-form-item label="目标玩家ID" prop="destPlayerId">
              <el-input v-model.number="formData.destPlayerId" placeholder="请输入" clearable  />
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer">
          <el-button size="medium" type="primary" @click="handleConfirm">确 定</el-button>
          <el-button size="medium" @click="closeDialog">取 消</el-button>
        </span>
      </el-dialog>
  
    </div>
  </template>
  
  <script>
  import { playerSwitch, addPlayerSwitch, delPlayerSwitch } from '@/api/playerManage'
  
  export default {
    data() {
      return {
        total: 0,
        currentPage: 1, // 当前页
        pageSize: 200, // 每页显示条数
        playerToggleData: [],
        dialogVisible: false,
        formData: {},
        tableHeight: 0,
        sourcePlayer:'',//来源玩家
        targetPlayer:'',//目标玩家
        rules:{
          oriPlayerId: [{ required: true, message: '请输入来源玩家ID', trigger: 'blur' },
          { type: 'number', message: '来源玩家ID为数字值'}],
          destPlayerId: [
            { required: true, message: '请输入目标玩家ID', trigger: 'blur' },
            { type: 'number', message: '目标玩家ID为数字值'}]
        }
      }
    },
  
    created() {
      this.getplayerToggle()
    },
  
    mounted() {
      this.$nextTick(() => {
        this.getTableHeight()
      })
      window.addEventListener('resize', this.$debounce(this.getTableHeight, 100))
    },
  
    beforeDestroy() {
      window.removeEventListener('resize', this.getTableHeight)
    },
  
    activated() {
      if (this.$refs.table && this.$refs.table.doLayout) {
        this.$refs.table.doLayout()
      }
    },
  
    methods: {
      // 获取数据
      async getplayerToggle() {
        const res = await playerSwitch({
          page: this.currentPage,
          limit: this.pageSize
        })
        this.total = res.data.data.count
        this.playerToggleData = res.data.data.data
      },
  
  
      // 删除
      handleDelete(id) {
        this.$confirm('你确定要删除这条数据吗?', '提示', {
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          type: 'warning',
          lockScroll: false
        }).then(async() => {
          const res = await delPlayerSwitch({ id:id })
          if (res.data.code === 0) {
            this.$message.success(res.data.message)
          }
          this.getplayerToggle()
        })
      },
  
      // 确定
      async handleConfirm() {
        await this.$refs.ruleForm.validate(async(valid) => {
          if (valid) {
              const res = await addPlayerSwitch(this.formData)
              if (res.data.code === 0) {
                this.$message.success(res.data.message)
              }
            this.getplayerToggle()
            this.closeDialog()
          }
        })
      },

    // 查询
    async handleInquire() {
      try {
        const query = { page: this.currentPage, limit: this.pageSize }
        if (this.sourcePlayer) {
          query.oriPlayerId = this.sourcePlayer
        }
        if (this.targetPlayer) {
          query.destPlayerId = this.targetPlayer
        }
        const res = await playerSwitch(query)
        this.total = res.data.data.count
        this.playerToggleData = res.data.data.data
        
        if (res.data.code === 0) {
          this.$message.success(res.data.message)
        }

      } catch (error) {
        console.error(error)
        this.$message.error('发生错误，请稍后重试')
      }
    },
    
    
      // 关闭弹窗
      closeDialog() {
        this.dialogVisible = false
        this.formData = {}
        this.$refs.ruleForm.clearValidate()
      },
  
      // 切换页面
      changePage(page) {
        this.currentPage = page
        this.getplayerToggle()
      },
  
      // 表格自适应高度
      getTableHeight() {
        if (this.$refs.table && this.$refs.table.$el) {
          this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 170
        } else {
          this.tableHeight = 300
        }
      }

    }
  }
  </script>
  
  <style lang="scss" scoped>
   .topInquire{
     font-weight: bold;
     font-size: 14px;
     color: #6a7488;
     margin-bottom: 20px;
     display: flex;
     flex-wrap: wrap;
     gap: 30px;
   }

  </style>
  